<template>
  <el-dialog title="新增员工" :visible="showAdd" @close="closeEvent">
    <el-form :model="ruleForm" :rules="rule" label-width="100px" ref="form">
      <el-form-item prop="username" label="姓名">
        <el-input
          v-model="ruleForm.username"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="手机号">
        <el-input
          v-model="ruleForm.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="formOfEmployment" label="聘用形势">
        <el-select
          v-model="ruleForm.formOfEmployment"
          placeholder="请输入聘用形式"
        >
          <el-option
            :label="item.value"
            :value="item.id"
            v-for="(item, index) in list"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="workNumber" label="工号">
        <el-input
          v-model="ruleForm.workNumber"
          placeholder="请输入工号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="departmentName" label="组织名称">
        <el-input
          v-model="ruleForm.departmentName"
          placeholder="请输入组织名称"
          @focus="focusEvent"
          readonly
        ></el-input>
        <!-- 树形结构 -->
        <el-tree
          v-if="treeShow"
          :data="treeData"
          :props="{ label: 'name', children: 'children' }"
          @node-click="nodeClick"
        ></el-tree>
      </el-form-item>
      <el-form-item prop="timeOfEntry" label="入职时间">
        <el-date-picker
          v-model="ruleForm.timeOfEntry"
          type="date"
          placeholder="请选择入职日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="correctionTime" label="转正时间">
        <el-date-picker
          v-model="ruleForm.correctionTime"
          type="date"
          placeholder="请选择转正日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeEvent">取 消</el-button>
      <el-button type="primary" @click="addEmployee">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import employees from '@/constant/employees'
import { companyDepartments } from '@/api/departments'
import { addEmplo } from '@/api/employess'
// 导入正则验证手机号的方法
import { phone } from '@/utils/validate'
export default {
  props: {
    showAdd: {
      type: Boolean
    }
  },
  model: {
    prop: 'showAdd',
    event: 'showChange'
  },
  data () {
    return {
      // 聘用形势的选项
      list: employees.hireType,
      // 树形结构的显示隐藏
      treeShow: false,
      // 树形结构的数据源
      treeData: [],
      initForm:'',
      // 表单数据源
      ruleForm: {
        // 姓名
        username: '',
        // 手机号
        mobile: '',
        // 聘用形势
        formOfEmployment: '',
        // 工号
        workNumber: '',
        // 组织名称
        departmentName: '',
        // 入职时间
        timeOfEntry: '',
        // 转正时间
        correctionTime: ''
      },
      // 表单验证规则
      rule: {
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              phone(value) ? callback() : callback(new Error('手机号不合法'))
            },
            trigger: 'blur'
          }
        ],
        formOfEmployment: [
          { required: true, message: '请输入聘用形势', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '请输入组织名称', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职日期', trigger: 'blur' }
        ],
        correctionTime: [
          { required: true, message: '请选择转正日期', trigger: 'blur' }
        ]
      }
    }
  },
  crested(){
    this.initForm = JSON.parse(JSON.stringify(this.ruleForm))
  },
  methods: {
    // 树形结构节点点击
    nodeClick (data) {
      this.ruleForm.departmentName = data.name
    },
    // 获取树形结构的数据
    async focusEvent () {
      this.treeShow = true
      if (this.treeData.length <= 0) {
        const res = await companyDepartments()
        // console.log(res)
        const data = res.depts
        this.treeData = this.arrChange(res.depts, '')
      }
    },
    // 过滤数组
    arrChange (arr, str) {
      return arr.filter(item => {
        if (item.pid === str) {
          item.children = this.arrChange(arr, item.id)
          return true
        }
      })
    },
    closeEvent () {
      this.$emit('showChange', false)
      this.$refs.form.resetFields()
      this.ruleForm = JSON.parse(JSON.stringify(this.initForm))
    },
    // 新增员工
    addEmployee () {
      // 全局校验
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await addEmplo(this.ruleForm)
          console.log(res)
          this.$message.success('新增成功')
          this.closeEvent()
          this.$emit('getsysUser')
        }
      })
    }
  }
}
</script>

<style></style>
